    <!-- 引入Bootstrap CSS -->
    <link href="{% static 'bootstrap/bootstrap.min.css' %}" rel="stylesheet">
    <!-- Bootstrap 图标 -->
    <!-- 引入bootstrap-icons -->
    <link rel="stylesheet" href="{% static 'bootstrap-icons-1.13.1/bootstrap-icons.css' %}">
    <link href="{% static 'bootstrap-icons-1.13.1/fonts/bootstrap-icons.woff' %}" rel="stylesheet">
    <link href="{% static 'bootstrap-icons-1.13.1/fonts/bootstrap-icons.woff2' %}" rel="stylesheet">

<div class="container mt-4">
   
    <a href="{% url 'core:course_period_create' %}" class="btn btn-primary mb-3">添加课程时间段</a>

    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }}">{{ message }}</div>
        {% endfor %}
    {% endif %}

    <table class="table table-striped table-hover">
        <thead class="table-dark">
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>开始时间</th>
                <th>时长(分钟)</th>
                <th>结束时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for period in course_periods %}
            <tr>
                <td>{{ period.id }}</td>
                <td>{{ period.name }}</td>
                <td>{{ period.start_time|date:'H:i' }}</td>
                <td>{{ period.duration }}</td>
                <td>{{ period.end_time|date:'H:i' }}</td>
                <td>
                    <a href="{% url 'core:course_period_update' period.id %}" class="btn btn-sm btn-warning">编辑</a>
                    <a href="{% url 'core:course_period_delete' period.id %}" class="btn btn-sm btn-danger">删除</a>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="6" class="text-center">暂无课程时间段数据</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
